<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学成在线首页</title>
  <link href="../css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--头部区域-->
<div class="header w">
<div class="logo">
  <img src="../img/logo.png">
</div>
  <div class="nav">
    <ul>
      <li><a href="#"> 首页</a></li>
      <li><a href="#">课程</a></li>
      <li><a href="#">职业规划</a></li>
    </ul>
  </div>
  <div class="search">
    <input type="text" placeholder="输入关键词...">
    <button></button>
  </div>
  <div class="user">
    <img src="../img/user.png">
    qqlilei
  </div>
</div>
<!--头部区域结束-->
<!--bannner区域开始-->
<div class="banner">
<div class="w">
<div class="subnav">
  <ul>
    <li><a href="#">前端开发<span>&gt;</span></a></li>
    <li><a href="#">后端开发<span>&gt;</span></a></li>
    <li><a href="#">移动开发<span>&gt;</span></a></li>
    <li><a href="#">人工智能<span>&gt;</span></a></li>
    <li><a href="#">商业预测<span>&gt;</span></a></li>
    <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
    <li><a href="#">运维&从测试<span>&gt;</span></a></li>
    <li><a href="#">UI设计<span>&gt;</span></a></li>
    <li><a href="#">产品<span>&gt;</span></a></li>
  </ul>
</div>
<!--  课程表模块-->
  <div class="course">
 <h2>我的课程表</h2>
    <div class="bd">
      <ul>
        <li>
          <h4>继续学习 程序语言设计</h4>
          <p>正在学习-使用对象</p>
        </li>
        <li>
          <h4>继续学习 程序语言设计</h4>
          <p>正在学习-使用对象</p>
        </li>
        <li>
          <h4>继续学习 程序语言设计</h4>
          <p>正在学习-使用对象</p>
        </li>
      </ul>
      <a href="#" class="more">全部课程</a>
    </div>
  </div>
</div>
</div>
<!--banner区域结束-->
<!--精品推荐模块开始-->
<div class="goods w">
<h3>精品推荐</h3>
  <ul>
    <li><a href="#">JQuery</a></li>
    <li><a href="#">JQuery</a></li>
    <li><a href="#">JQuery</a></li>
    <li><a href="#">JQuery</a></li>
    <li><a href="#">JQuery</a></li>
  </ul>
  <li><a href="#" class="mod">修改兴趣</a></li>
</div>
<!--精品推荐模块结束-->
<!--box核心内容区域开始-->
<div class="box w">
  <div class="box-hd">
    <h3>精品推荐</h3>
    <a href="#">查看全部</a>
  </div>
  <div class="box-bd">
    <ul class="clearfix">
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course.png">
        <h4>Andriod Hybrid APP开发实战H5+原生</h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course2.png">
        <h4>Android 网络图片加载框架详解 </h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course.png">
        <h4>Andriod Hybrid APP开发实战H5+原生</h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course2.png">
        <h4>Android 网络图片加载框架详解 </h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course.png">
        <h4>Andriod Hybrid APP开发实战H5+原生</h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course2.png">
        <h4>Android 网络图片加载框架详解 </h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course.png">
        <h4>Andriod Hybrid APP开发实战H5+原生</h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course2.png">
        <h4>Android 网络图片加载框架详解 </h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course.png">
        <h4>Andriod Hybrid APP开发实战H5+原生</h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <em>
          <img src="../img/hot.png">
        </em>
        <img src="../img/course2.png">
        <h4>Android 网络图片加载框架详解 </h4>
        <div class="info"><span>高级</span>• 1125人在学习</div>
      </li>
    </ul>
  </div>
</div>
<!--box核心内容区域结束-->
<!--编程入门区域开始-->
<div class="level w ">
  <div class="level-hd clearfix">
    <h3>精品推荐</h3>
    <ul>
      <li><a href="#">热门</a></li>
      <li><a href="#">初级</a></li>
      <li><a href="#">中级</a></li>
      <li><a href="#">高级</a></li>
    </ul>
    <a href="#">查看全部</a>
  </div>
  <div class="level-bd">
    <img src="../img/l1.png" class="l1">
    <img src="../img/happycoding.png" class="hc">
    <ul class="clearfix">
      <li>
       <img src="../img/ugui.png">
        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
        <div class="info2"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <img src="../img/ugui.png">
        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
        <div class="info2"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <img src="../img/ugui.png">
        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
        <div class="info2"><span>高级</span>• 1125人在学习</div>
      </li>
      <li>
        <img src="../img/ugui.png">
        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
        <div class="info2"><span>高级</span>• 1125人在学习</div>
      </li>
    </ul>
  </div>
</div>
<!--编程入门区域结束-->
<!--footer区域开始-->
<div class="footer">
  <div class="w">
   <div class="copyright">
  <img src="../img/logo.png">
     <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
       © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
     <a href="#" class="app">下载app</a>
   </div>
    <div class="links">
      <dl>
        <dd>关于学成网</dd>
        <dt><a href="#">关于</a></dt>
        <dt><a href="#">管理团队</a></dt>
        <dt><a href="#">工作机会</a></dt>
        <dt><a href="#">客户服务</a></dt>
        <dt><a href="#">帮助</a></dt>
      </dl>
      <dl>
        <dd>关于学成网</dd>
        <dt><a href="#">关于</a></dt>
        <dt><a href="#">管理团队</a></dt>
        <dt><a href="#">工作机会</a></dt>
        <dt><a href="#">客户服务</a></dt>
        <dt><a href="#">帮助</a></dt>
      </dl>
      <dl>
        <dd>关于学成网</dd>
        <dt><a href="#">关于</a></dt>
        <dt><a href="#">管理团队</a></dt>
        <dt><a href="#">工作机会</a></dt>
        <dt><a href="#">客户服务</a></dt>
        <dt><a href="#">帮助</a></dt>
      </dl>
    </div>
  </div>
</div>
<!--footer区域结束-->
</body>
</html>
